<template>
    <main class="p-4 bg-gray-50 min-h-screen">
        <div class="max-w-screen-xl mx-auto bg-white p-8 rounded-lg shadow-2xl">
            <h2 class="text-3xl my-6">评论</h2>
            <CommentBox @submit="addNewComment"/>
            <!-- 分隔线 -->
            <DividerHorizontal/>

            <div v-for="comment in comments" :key="comment.id">
                <!-- 单个留言 -->
                <CommentItem
                    :user="comment.user"
                    :avatar="comment.avatar"
                    :time="comment.time"
                    :content="comment.content"
                />
                <!-- 回复留言 -->
                <ReplyContainer v-if="comment.replies && comment.replies.length > 0">
                    <CommentItem
                        v-for="reply in comment.replies"
                        :key="reply.id"
                        :user="reply.user"
                        :avatar="reply.avatar"
                        :time="reply.time"
                        :content="reply.content"
                    />
                </ReplyContainer>
                <ReplyBox @submit="addReply($event, comment.id)"/>
            </div>
        </div>
    </main>
</template>

<script setup>
import CommentBox from './components/CommentBox.vue'
import DividerHorizontal from './components/DividerHorizontal.vue'
import CommentItem from './components/CommentItem.vue'
import ReplyBox from './components/ReplyBox.vue'
import ReplyContainer from './components/ReplyContainer.vue'

// import face4 from "./assets/face4.webp";
let face4 = "https://cdn.jsdelivr.net/gh/Ling137/imgbed@main/data/github.ico"
import {ref} from "vue";

// ref(4)代表什么意思？？？
let rid = ref(4);
console.log("ref", ref)
let a = ref()
console.log("a", a.value, a)
/*
let ref = (value) => {
  return createRef(value, false);
}
*/

const comments = ref([
    {
        id: 1,
        user: '梦落轻巡',
        avatar: 'https://cdn.jsdelivr.net/gh/Ling137/imgbed@main/data/unlimitedTiling.png',
        time: '2小时之前',
        content:
            '哇！这篇文章真是写的太好啦！收到很大的启发，希望博主能够再接再厉，产出越来愈多，越来越多更好的文章！',
        replies: [
            {
                id: 2,
                user: '陌上花开',
                avatar: 'https://cdn.jsdelivr.net/gh/Ling137/imgbed@main/data/20210719233144.png',
                time: '2小时之前',
                content: '哇！',
                replies: [],
            },
            {
                id: 3,
                user: '半梦半醒半浮生',
                avatar: 'https://cdn.jsdelivr.net/gh/Ling137/imgbed@main/data/tai%20chi.png',
                time: '2小时之前',
                content:
                    '哇！这篇文章真是写的太好啦！收到很大的启发，希望博主能够再接再厉，产出越来愈多，越来越多更好的文章！',
                replies: [],
            },
        ],
    },
])

// 构造工具函数，组装新的留言对象
const constructNewComment = (content) => {
    return {
        id: rid.value++,
        user: "当前用户",
        avatar: face4,
        content,
        time: "1秒前",
    };
};

// 添加新的评论
const addNewComment = (content) => {
    const newComment = constructNewComment(content);
    console.log({newComment})
    comments.value.push(newComment);
};

const addReply = (content, id) => {
    const reply = constructNewComment(content);
    let comment = comments.value.find((comment) => comment.id === id);
    if (comment.replies) {
        comment.replies.push(reply);
    } else {
        comment.replies = [reply];
    }
};
</script>

<style></style>
